<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="description" content="小米商场直营小米公司旗下所有产品">
    <meta name="keywords" content="小米，小米商城" >
    <link rel="icon" href="./imgs/logo.png">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/index.js"></script>
</head>
<body>
    <div class="wrap">
        <!--顶部导航栏-->
        <div class="topbar">
            <div class="container">
                <!--导航-->
                <div class="topbar-nav">
                    <a href="#">小米商城</a>
                    <span class="sep">|</span>
                    <a href="#">MIUI</a>
                    <span class="sep">|</span>
                    <a href="#">loT</a>
                    <span class="sep">|</span>
                    <a href="#">云服务</a>
                    <span class="sep">|</span>
                    <a href="#">水滴</a>
                    <span class="sep">|</span>
                    <a href="#">金融</a>
                    <span class="sep">|</span>
                    <a href="#">有品</a>
                    <span class="sep">|</span>
                    <a href="#">Select Region</a>
                </div>
                <!--购物车-->
                <div class="topbar-cart">
                    <a href="#">
                        <span class="icon"></span>
                        <span class="shop-cart">购物车(0)</span>
                    </a>
                </div>
                <!--用户信息-->
                <div class="topbar-info">
                    <a href="#">登录</a>
                    <span class="sep">|</span>
                    <a href="#">注册</a>
                    <span class="sep">|</span>
                    <a href="#">消息通知</a>
                </div>
            </div>
        </div>

        <!--header-->
        <div class="header">
            <div class="container">
                <!--logo-->
                <div class="header-logo">
                    <a href="#"><img class="logo1" src="./imgs/logo.png" alt="小米图标"></a>
                    <a href="#"><img class="logo2" src="./imgs/5.1.png" alt="5.1活动"></a>
                </div>
                <!--导航-->
                <div class="header-nav">
                    <ul>
                        <li><a href="#">小米手机</a>
                            <div class="div1">
                                <div class="div2">
                                    <ul>
                                        <li><div></div><span>小米手机</span></li>
                                        <li><div></div><span>小米手机</span></li>
                                        <li><div></div><span>小米手机</span></li>
                                        <li><div></div><span>小米手机</span></li>
                                        <li><div></div><span>小米手机</span></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li><a href="#">红米</a>
                           <div class="div1">
                                <div class="div2">
                                    <ul>
                                        <li><div></div><span>红米手机</span></li>
                                        <li><div></div><span>红米手机</span></li>
                                        <li><div></div><span>红米手机</span></li>
                                        <li><div></div><span>红米手机</span></li>
                                        <li><div></div><span>红米手机</span></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li><a href="#">电视</a>
                           <div class="div1">
                                <div class="div2">
                                    <ul>
                                        <li><div></div><span>电视</span></li>
                                        <li><div></div><span>电视</span></li>
                                        <li><div></div><span>电视</span></li>
                                        <li><div></div><span>电视</span></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li><a href="#">笔记本</a>
                           <div class="div1">
                                <div class="div2">
                                    <ul>
                                        <li><div></div><span>笔记本</span></li>
                                        <li><div></div><span>笔记本</span></li>
                                        <li><div></div><span>笔记本</span></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li><a href="#">盒子</a>
                           <div class="div1">
                                <div class="div2">
                                    <ul>
                                        <li><div></div><span>盒子</span></li>
                                        <li><div></div><span>盒子</span></li>
                                        <li><div></div><span>盒子</span></li>
                                        <li><div></div><span>盒子</span></li>
                                        <li><div></div><span>盒子</span></li>
                                        <li><div></div><span>盒子</span></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li><a href="#">新品</a>
                           <div class="div1">
                                <div class="div2">
                                    <ul>
                                        <li><div></div><span>新品</span></li>
                                        <li><div></div><span>新品</span></li>
                                        <li><div></div><span>新品</span></li>
                                        <li><div></div><span>新品</span></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li><a href="#">路由器</a>
                           <div class="div1">
                                <div class="div2">
                                    <ul>
                                        <li><div></div><span>路由器</span></li>
                                        <li><div></div><span>路由器</span></li>
                                        <li><div></div><span>路由器</span></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li><a href="#">智能硬件</a>
                           <div class="div1">
                                <div class="div2">
                                    <ul>
                                        <li><div></div><span>智能硬件</span></li>
                                        <li><div></div><span>智能硬件</span></li>
                                        <li><div></div><span>智能硬件</span></li>
                                        <li><div></div><span>智能硬件</span></li>
                                        <li><div></div><span>智能硬件</span></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li><a href="#">服务</a>
                             <div>
                                <div>
                                </div>
                             </div>
                        </li>
                        <li><a href="#">社区</a>
                             <div>
                                <div>
                                </div>
                             </div>
                        </li>
                    </ul>
                </div>
                <!--搜索框-->
                <div class="header-search">
                    <form action="//search.mi.com/search" method="get">
                        <label for="search"></label>
                        <input type="text" name="search" id="search">
                        <span class="hot-words">
                            <a href="#">小米Note 3</a>
                            <a href="#">小米6X 开售</a>
                        </span>
                        <input type="submit" value="" id="submit">
                    </form>
                </div>
            </div>
        </div>

        <!--主要内容-->
        <div class="content">
            <div class="container">
                <!--内容上部分-->
                <div class="con-up">
                    <div class="up-l">
                        <ul>
                            <li><a href="#">手机&nbsp;电话卡</a><span>&gt;</span>
                                <div>
                                    <ul>
                                        <li><span></span>小米手机</li>
                                        <li><span></span>小米手机</li>
                                        <li><span></span>小米手机</li>
                                        <li><span></span>小米手机</li>
                                        <li><span></span>小米手机</li>
                                        <li><span></span>小米手机</li>
                                        <li><span></span>小米手机</li>
                                        <li><span></span>小米手机</li>
                                        <li><span></span>小米手机</li>
                                        <li><span></span>小米手机</li>
                                        <li><span></span>小米手机</li>
                                        <li><span></span>小米手机</li>
                                        <li><span></span>小米手机</li>
                                        <li><span></span>小米手机</li>
                                        <li><span></span>小米手机</li>
                                    </ul>
                                </div>
                            </li>
                            <li><a href="#">电视&nbsp;盒子</a><span>&gt;</span>
                                <div>
                                    <ul>
                                        <li><span></span>红米手机</li>
                                        <li><span></span>红米手机</li>
                                        <li><span></span>红米手机</li>
                                        <li><span></span>红米手机</li>
                                        <li><span></span>红米手机</li>
                                        <li><span></span>红米手机</li>
                                        <li><span></span>红米手机</li>
                                        <li><span></span>红米手机</li>
                                        <li><span></span>红米手机</li>
                                        <li><span></span>红米手机</li>
                                        <li><span></span>红米手机</li>
                                        <li><span></span>红米手机</li>
                                        <li><span></span>红米手机</li>
                                        <li><span></span>红米手机</li>
                                    </ul>
                                </div>
                            </li>
                            <li><a href="#">笔记本</a><span>&gt;</span>
                                <div>
                                    <ul>
                                        <li><span></span>笔记本</li>
                                        <li><span></span>笔记本</li>
                                        <li><span></span>笔记本</li>
                                        <li><span></span>笔记本</li>
                                        <li><span></span>笔记本</li>
                                        <li><span></span>笔记本</li>
                                        <li><span></span>笔记本</li>
                                        <li><span></span>笔记本</li>
                                        <li><span></span>笔记本</li>
                                    </ul>
                                </div>
                            </li>
                            <li><a href="#">智能&nbsp;家电</a><span>&gt;</span>
                                <div>
                                    <ul>
                                        <li><span></span>家电</li>
                                        <li><span></span>家电</li>
                                        <li><span></span>家电</li>
                                        <li><span></span>家电</li>
                                        <li><span></span>家电</li>
                                        <li><span></span>家电</li>
                                        <li><span></span>家电</li>
                                        <li><span></span>家电</li>
                                        <li><span></span>家电</li>
                                        <li><span></span>家电</li>
                                        <li><span></span>家电</li>
                                        <li><span></span>家电</li>
                                        <li><span></span>家电</li>
                                        <li><span></span>家电</li>
                                        <li><span></span>家电</li>
                                        <li><span></span>家电</li>
                                        <li><span></span>家电</li>
                                        <li><span></span>家电</li>
                                        <li><span></span>家电</li>
                                    </ul>
                                </div>
                            </li>
                            <li><a href="#">健康&nbsp;家居</a><span>&gt;</span>
                                <div>
                                    <ul>
                                        <li><span></span>健康</li>
                                        <li><span></span>健康</li>
                                        <li><span></span>健康</li>
                                        <li><span></span>健康</li>
                                        <li><span></span>健康</li>
                                        <li><span></span>健康</li>
                                        <li><span></span>健康</li>
                                        <li><span></span>健康</li>
                                        <li><span></span>健康</li>
                                        <li><span></span>健康</li>
                                        <li><span></span>健康</li>
                                        <li><span></span>健康</li>
                                    </ul>
                                </div>
                            </li>
                            <li><a href="#">出行&nbsp;儿童</a><span>&gt;</span>
                                <div>
                                    <ul>
                                        <li><span></span>出行</li>
                                        <li><span></span>出行</li>
                                        <li><span></span>出行</li>
                                        <li><span></span>出行</li>
                                        <li><span></span>出行</li>
                                        <li><span></span>出行</li>
                                        <li><span></span>出行</li>
                                        <li><span></span>出行</li>
                                        <li><span></span>出行</li>
                                        <li><span></span>出行</li>
                                        <li><span></span>出行</li>
                                        <li><span></span>出行</li>
                                        <li><span></span>出行</li>
                                    </ul>
                                </div>
                            </li>
                            <li><a href="#">路由器&nbsp;手机配件</a><span>&gt;</span>
                                <div>
                                    <ul>
                                        <li><span></span>路由器</li>
                                        <li><span></span>路由器</li>
                                        <li><span></span>路由器</li>
                                        <li><span></span>路由器</li>
                                        <li><span></span>路由器</li>
                                        <li><span></span>路由器</li>
                                        <li><span></span>路由器</li>
                                        <li><span></span>路由器</li>
                                        <li><span></span>路由器</li>
                                        <li><span></span>路由器</li>
                                        <li><span></span>路由器</li>
                                        <li><span></span>路由器</li>
                                        <li><span></span>路由器</li>
                                        <li><span></span>路由器</li>
                                        <li><span></span>路由器</li>
                                        <li><span></span>路由器</li>
                                        <li><span></span>路由器</li>
                                        <li><span></span>路由器</li>
                                        <li><span></span>路由器</li>
                                        <li><span></span>路由器</li>
                                    </ul>
                                </div>
                            </li>
                            <li><a href="#">移动电源&nbsp;插线板</a><span>&gt;</span>
                                <div>
                                    <ul>
                                        <li><span></span>移动电源</li>
                                        <li><span></span>移动电源</li>
                                        <li><span></span>移动电源</li>
                                        <li><span></span>移动电源</li>
                                        <li><span></span>移动电源</li>
                                        <li><span></span>移动电源</li>
                                        <li><span></span>移动电源</li>
                                        <li><span></span>移动电源</li>
                                        <li><span></span>移动电源</li>
                                        <li><span></span>移动电源</li>
                                        <li><span></span>移动电源</li>
                                        <li><span></span>移动电源</li>
                                        <li><span></span>移动电源</li>
                                        <li><span></span>移动电源</li>
                                        <li><span></span>移动电源</li>
                                        <li><span></span>移动电源</li>
                                        <li><span></span>移动电源</li>
                                        <li><span></span>移动电源</li>
                                        <li><span></span>移动电源</li>
                                        <li><span></span>移动电源</li>
                                    </ul>
                                </div>
                            </li>
                            <li><a href="#">耳机&nbsp;音响</a><span>&gt;</span>
                                <div>
                                    <ul>
                                        <li><span></span>耳机</li>
                                        <li><span></span>耳机</li>
                                        <li><span></span>耳机</li>
                                        <li><span></span>耳机</li>
                                        <li><span></span>耳机</li>
                                        <li><span></span>耳机</li>
                                        <li><span></span>耳机</li>
                                        <li><span></span>耳机</li>
                                        <li><span></span>耳机</li>
                                        <li><span></span>耳机</li>
                                        <li><span></span>耳机</li>
                                        <li><span></span>耳机</li>
                                        <li><span></span>耳机</li>
                                        <li><span></span>耳机</li>
                                        <li><span></span>耳机</li>
                                        <li><span></span>耳机</li>
                                    </ul>
                                </div>
                            </li>
                            <li><a href="#">生活&nbsp;米兔</a><span>&gt;</span>
                                <div>
                                    <ul>
                                        <li><span></span>生活</li>
                                        <li><span></span>生活</li>
                                        <li><span></span>生活</li>
                                        <li><span></span>生活</li>
                                        <li><span></span>生活</li>
                                        <li><span></span>生活</li>
                                        <li><span></span>生活</li>
                                        <li><span></span>生活</li>
                                        <li><span></span>生活</li>
                                        <li><span></span>生活</li>
                                        <li><span></span>生活</li>
                                        <li><span></span>生活</li>
                                        <li><span></span>生活</li>
                                        <li><span></span>生活</li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="up-r">
                        <a href="#">
                            <img style="display: block;" src="imgs/con-img1.jpg" alt="内容图片">
                            <img style="display:none;" src="imgs/con-img2.jpg" alt="内容图片">
                            <img style="display: none;" src="imgs/con-img3.jpg" alt="内容图片">
                        </a>
                    </div>
                </div>
                <!--内容下部分-->
                <div class="con-down">
                    <div class="down-l">
                        <ul>
                            <li><a href="#"><span></span>选购手机</a></li>
                            <li><a href="#"><span></span>企业团购</a></li>
                            <li><a href="#"><span></span>F码通道</a></li>
                            <li><a href="#"><span></span>米粉卡</a></li>
                            <li><a href="#"><span></span>以旧换新</a></li>
                            <li><a href="#"><span></span>花费充值</a></li>
                        </ul>
                    </div>
                    <div class="down-r">
                        <ul>
                            <li><a href="#"><img src="./imgs/icon-down1.jpg" alt="小米图片"></a></li>
                            <li><a href="#"><img src="./imgs/icon-down2.jpg" alt="红米图片"></a></li>
                            <li><a href="#"><img src="./imgs/icon-down3.jpg" alt="净水器图片"></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!--右侧固定栏目-->
        <div class="bar-right">
            <ul id="right-ul">
                <li><div class="fixed-1"></div><p>扫一扫</p>
                    <div class="fixed-1-img"><img src="imgs/fixed-1x.png" alt=""></div>
                </li>
                <li ><div class="fixed-2"></div><p>个人中心</p></li>
            </ul>
        </div>

        <!--底部-->
        <div class="footer">
            <p>搜索黑科技，小米为发烧而生！</p>
        </div>
    </div>
</body>
</html>